<template>
    <div class="boxContentCss">
        <div >
            <el-form ref="formRef" :model="decorationForm" label-position="right" label-width="auto">
                <EdCreateCard title="租赁信息">
                    <template #back>
                        <div class="createBack" style="margin-top:8px" @click="$utilsSet.goBack(router)">
                            <svg-icon icon-class="back" /> 返回
                        </div>
                    </template>
                    <div class="zh_flex">
                        <div class="left">
                            <el-row class="width-100" :gutter="20">
                                <el-col :span="12">
                                    <el-form-item class="width-m25" label="状态:" prop="status" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <EdSelect v-model="decorationForm.status"  style="width: 100%;" :selectParams="data.selectLeaseStatus"></EdSelect> 
                                        <!-- <el-input class="flex-input" disabled v-model="decorationForm.leaseStatus">出租中</el-input> -->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item class="width-m25" label="房号" prop="address"   :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" disabled v-model="decorationForm.address" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100" :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="联系人:" prop="contactsName" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input class="flex-input" v-model="decorationForm.contactsName" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系电话:" prop="contactsPhone" :rules="$validate.validates({required:true,msg:'不能为空',type:'tel'})">
                                        <el-input class="flex-input" v-model="decorationForm.contactsPhone" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100" :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="施工时间:" prop="pickerTime" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                       <EdDateTimePickerRange v-model="decorationForm.pickerTime"  
                                        @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" 
                                        style="width:100%"
                                        :pickerParams="data.pickerRangeParams"></EdDateTimePickerRange>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100" :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="施工内容" prop="details">
                                        <el-input placeholder="请输入施工内容描述" type="textarea" v-model="decorationForm.details" :rows="4"  maxlength="200" show-word-limit></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100" :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="垃圾清理运费"  prop="cleanFee" :rules="$validate.validates({required:true,msg:'垃圾清理运费不能为空'})">
                                        <el-input class="flex-input phoneStyle" v-model="decorationForm.cleanFee" placeholder="垃圾清理运费">
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </el-col> 
                                <el-col :span="12">  
                                <el-form-item label="装修保证金"  prop="earnestMoney" :rules="$validate.validates({required:true,msg:'装修保证金不能为空'})">
                                    <el-input class="flex-input phoneStyle" v-model="decorationForm.earnestMoney" placeholder="装修保证金">
                                        <span slot="suffix">元</span>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item class="form_btns">
                                        <el-button class="ed-button ed_black-bottom" @click="onSubmit()" >确定</el-button>
                                        <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack(router)">取消</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="right">
                            <div class="right_title">进度跟踪</div>
                            <div>
                                <el-timeline :reverse="data.reverse">
                                    <el-timeline-item v-for="(activity, index) in data.activities" :key="index" color="#EED096" size="large">
                                        <div class="timeline_time">{{activity.scheduleTime}}</div>
                                        <div class="timeline_content">{{activity.status}}</div>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>
                </EdCreateCard>
            </el-form>
        </div>
    </div>
</template>
<script setup>
    import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { reactive, onActivated,onDeactivated,ref,watch} from 'vue'
    import * as api from './api' 
    import message from 'src/utils/once-message' 
    import router from 'src/router'

    const formRef = ref()

    const decorationForm = reactive({
        id:router.currentRoute.query.id,
        status:'',
        address:'',
        contactsName:'',
        contactsPhone:'',
        pickerTime:[],
        startTime:'',
        endTime:'',
        createTime:'',
        details:'',
        cleanFee:'',
        earnestMoney:''
    })
    const data = reactive({
        reverse: true,
        activities: [],
        pickerRangeParams:{
            // valueFormat:"yyyy-MM-dd HH:mm"
        },
        selectLeaseStatus:{
            options:[{value: '0', label: '装修申报'}],
            disabled:true
        },
    })

    onActivated(()=>{
         // 出租中
        if(router.currentRoute.query.id && router.currentRoute.query.status==0){
            // 编辑 
            parkingRentInfo();
        }
    })

    onDeactivated(()=>{
        data.pics=[]
        Object.assign(decorationForm,{})
    })

    function parkingRentInfo(){
        api.info({id:router.currentRoute.query.id}).then(response => {
            if(response.success) {
                Object.assign(decorationForm,response.data)
                // decorationForm = {...response.data}
                data.activities = response.data.trackProgressVOS
                decorationForm.status = response.data.status.toString()
                decorationForm.pickerTime = response.data.pickerTime
                decorationForm.startTime = response.data.startTime
                decorationForm.endTime = response.data.endTime
                // decorationForm.pickerTime=response.data.startTime&&[response.data.startTime,response.data.endTime]
            }
        })
    }

    function onSubmit(){
        formRef.value.validate((valid)=>{
            if(!valid){
                return
            }
            api.DecotationAdd(decorationForm).then(res=>{
                if(res.success){
                    message.success({
                        message: '编辑成功',
                        center: true,
                        duration: 2000,
                    })
                }
                router.back()
                formRef.value.resetFields()
            })
        })
    }

    function emitEchoTimeDate($event,name){
        // $event 子组件$emit传的参数 
        console.log('$event',$event);
        decorationForm['startTime'] = $event['startTime']
        decorationForm['endTime'] = $event['endTime']
    }

    watch(()=>decorationForm.pickerTime,(newVal, oldVal)=>{
        console.log('newval',newVal);
        if(newVal && newVal.length > 0) {
            console.log('startTime',decorationForm.startTime);
            decorationForm.startTime = newVal[0]
            decorationForm.endTime = newVal[1]
        }
    },{deep:true})
</script>

<style scoped lang="scss">
   :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        .left{
            flex: 2;
            border-right: 1px solid #e5e7eb;
            // border: 1px solid #e5e7eb;
            padding: 0 40px 5px 20px;
        }
        .right{
            flex: 1;
            padding: 5px 20px;
        }
    }
</style>